<template>
  <div :class="[
    'min-h-screen p-6',
    isDarkTheme 
      ? 'bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900' 
      : 'bg-gradient-to-br from-slate-50 via-blue-50 to-slate-100'
  ]">
    

    <!-- 页面标题 -->
    <div class="text-center mb-8">
      <h1 class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-purple-700 mb-4 animate-glow">
        <Calculator :class="[
          'w-12 h-12 inline-block mr-4',
          isDarkTheme ? 'text-cyan-400' : 'text-cyan-600'
        ]" />
        税收政策对比分析智能Agent
      </h1>
      <p :class="[
        'text-xl opacity-90',
        isDarkTheme ? 'text-slate-300' : 'text-slate-700'
      ]">多维度智能分析 · 深度对比洞察 · 趋势预测建议</p>
    </div>

    <!-- 主要分析区域 -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
      <!-- 左侧：政策选择区 -->
      <div class="xl:col-span-1 space-y-6 sticky top-6 self-start max-h-[calc(100vh-8rem)] overflow-y-auto">
        <!-- 政策选择器 -->
        <div :class="[
          'glass-card p-6',
          isDarkTheme 
            ? 'bg-slate-800/90 backdrop-blur-sm border border-slate-700' 
            : 'bg-white/80 backdrop-blur-sm border border-slate-200'
        ]">
          <h3 :class="[
            'text-xl font-bold mb-4 flex items-center',
            isDarkTheme ? 'text-slate-100' : 'text-slate-800'
          ]">
            <FileText :class="[
              'w-5 h-5 mr-2',
              isDarkTheme ? 'text-cyan-400' : 'text-cyan-600'
            ]" />
            政策选择
          </h3>
          
          <!-- 搜索框 -->
          <div class="mb-4">
            <input 
              v-model="searchQuery"
              type="text" 
              placeholder="搜索税收政策..."
              :class="[
                'w-full p-3 rounded-lg border transition-colors',
                isDarkTheme
                  ? 'bg-slate-700 text-slate-100 border-slate-600 focus:border-cyan-400 focus:ring-1 focus:ring-cyan-400 placeholder-slate-400'
                  : 'bg-white text-slate-900 border-slate-300 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 placeholder-slate-500'
              ]"
            >
          </div>

          <!-- 政策类型筛选 -->
          <div class="mb-4">
            <label :class="[
              'block font-medium mb-2',
              isDarkTheme ? 'text-slate-100' : 'text-slate-800'
            ]">政策类型</label>
            <select 
              v-model="selectedPolicyType" 
              :class="[
                'w-full p-3 rounded-lg border transition-colors',
                isDarkTheme
                  ? 'bg-slate-700 text-slate-100 border-slate-600 focus:border-cyan-400 focus:ring-1 focus:ring-cyan-400'
                  : 'bg-white text-slate-900 border-slate-300 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500'
              ]"
            >
              <option value="">全部类型</option>
              <option value="income_tax">个人所得税</option>
              <option value="corporate_tax">企业所得税</option>
              <option value="vat">增值税</option>
              <option value="consumption_tax">消费税</option>
              <option value="property_tax">财产税</option>
            </select>
          </div>

          <!-- 政策列表 -->
          <div class="space-y-3 max-h-64 overflow-y-auto">
            <div 
              v-for="policy in filteredPolicies" 
              :key="policy.id"
              @click="togglePolicySelection(policy)"
              :class="[
                'policy-card p-4 rounded-lg cursor-pointer transition-all border',
                selectedPolicies.includes(policy.id) 
                  ? isDarkTheme 
                    ? 'border-cyan-400 bg-cyan-900/30' 
                    : 'border-cyan-500 bg-cyan-50'
                  : isDarkTheme 
                    ? 'border-slate-600 bg-slate-700/50 hover:border-cyan-400 hover:bg-slate-700' 
                    : 'border-slate-200 bg-white hover:border-cyan-400 shadow-sm'
              ]"
            >
              <div class="flex items-center justify-between">
                <h4 :class="[
                  'font-medium text-sm',
                  isDarkTheme ? 'text-slate-100' : 'text-slate-800'
                ]">{{ policy.title }}</h4>
                <input 
                  type="checkbox" 
                  :checked="selectedPolicies.includes(policy.id)"
                  class="w-4 h-4 text-cyan-600 rounded focus:ring-cyan-500"
                >
              </div>
              <div class="flex items-center justify-between mt-2">
                <span :class="[
                  'text-xs',
                  isDarkTheme ? 'text-slate-400' : 'text-slate-600'
                ]">{{ policy.type }}</span>
                <span :class="[
                  'text-xs',
                  isDarkTheme ? 'text-cyan-400' : 'text-cyan-600'
                ]">{{ policy.effectiveDate }}</span>
              </div>
            </div>
          </div>

          <!-- 选择统计 -->
          <div :class="[
            'mt-4 p-3 rounded-lg border',
            isDarkTheme 
              ? 'bg-cyan-900/30 border-cyan-700' 
              : 'bg-cyan-50 border-cyan-200'
          ]">
            <div :class="[
              'text-sm',
              isDarkTheme ? 'text-cyan-300' : 'text-cyan-700'
            ]">
              已选择 {{ selectedPolicies.length }} 项政策
              <span v-if="selectedPolicies.length >= 2" :class="[
                isDarkTheme ? 'text-green-400' : 'text-green-600'
              ]">（可进行对比）</span>
            </div>
          </div>
        </div>

        <!-- 分析维度配置 -->
        <div :class="[
          'glass-card p-6',
          isDarkTheme 
            ? 'bg-slate-800/90 backdrop-blur-sm border border-slate-700' 
            : 'bg-white/80 backdrop-blur-sm border border-slate-200'
        ]">
          <h3 :class="[
            'text-xl font-bold mb-4 flex items-center',
            isDarkTheme ? 'text-slate-100' : 'text-slate-800'
          ]">
            <Settings :class="[
              'w-5 h-5 mr-2',
              isDarkTheme ? 'text-purple-400' : 'text-purple-600'
            ]" />
            分析维度
          </h3>
          
          <div class="space-y-3">
            <label v-for="dimension in analysisDimensions" :key="dimension.id" class="flex items-center space-x-3">
              <input 
                type="checkbox" 
                v-model="selectedDimensions" 
                :value="dimension.id"
                class="w-4 h-4 text-cyan-600 rounded focus:ring-cyan-500"
              >
              <span :class="[
                'text-sm',
                isDarkTheme ? 'text-slate-100' : 'text-slate-800'
              ]">{{ dimension.name }}</span>
              <span :class="[
                'text-xs',
                isDarkTheme ? 'text-slate-400' : 'text-slate-500'
              ]">({{ dimension.description }})</span>
            </label>
          </div>

          <!-- 开始分析按钮 -->
          <button 
            @click="startAnalysis"
            :disabled="selectedPolicies.length < 2 || selectedDimensions.length === 0"
            class="w-full mt-6 px-4 py-3 bg-gradient-to-r from-cyan-500 to-purple-600 text-white rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-cyan-400/30 hover:from-cyan-400 hover:to-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Zap class="w-4 h-4 inline mr-2" />
            {{ isAnalyzing ? '分析中...' : '开始智能分析' }}
          </button>
        </div>
      </div>

      <!-- 右侧：分析结果区 -->
      <div class="xl:col-span-2 space-y-6">
        <!-- 基础信息对比 -->
        <div v-if="analysisResult && selectedDimensions.includes('basic_info')" :class="[
          'glass-card p-6',
          isDarkTheme 
            ? 'bg-slate-800/90 backdrop-blur-sm border border-slate-700' 
            : 'bg-white/80 backdrop-blur-sm border border-slate-200'
        ]">
          <h3 :class="[
            'text-xl font-bold mb-4 flex items-center',
            isDarkTheme ? 'text-slate-100' : 'text-slate-800'
          ]">
            <BarChart3 :class="[
              'w-5 h-5 mr-2',
              isDarkTheme ? 'text-cyan-400' : 'text-cyan-600'
            ]" />
            基础信息对比
          </h3>
          
          <div class="overflow-x-auto">
            <table class="w-full text-sm">
              <thead>
                <tr :class="[
                  'border-b',
                  isDarkTheme ? 'border-slate-600' : 'border-slate-200'
                ]">
                  <th :class="[
                    'text-left py-3 px-2',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">对比项目</th>
                  <th v-for="policy in selectedPolicyDetails" :key="policy.id" 
                      :class="[
                        'text-left py-3 px-2 min-w-[200px]',
                        isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                      ]">
                    {{ policy.title.length > 15 ? policy.title.substring(0, 15) + '...' : policy.title }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr :class="[
                  'border-b',
                  isDarkTheme ? 'border-slate-600' : 'border-slate-200'
                ]">
                  <td :class="[
                    'py-3 px-2',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">政策类型</td>
                  <td v-for="policy in selectedPolicyDetails" :key="policy.id" class="py-3 px-2">
                    <span :class="[
                      'px-2 py-1 rounded text-xs',
                      isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                    ]">
                      {{ getPolicyTypeText(policy.type) }}
                    </span>
                  </td>
                </tr>
                <tr :class="[
                  'border-b',
                  isDarkTheme ? 'border-slate-600' : 'border-slate-200'
                ]">
                  <td :class="[
                    'py-3 px-2',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">生效日期</td>
                  <td v-for="policy in selectedPolicyDetails" :key="policy.id" :class="[
                    'py-3 px-2',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">
                    {{ policy.effectiveDate }}
                  </td>
                </tr>
                <tr :class="[
                  'border-b',
                  isDarkTheme ? 'border-slate-600' : 'border-slate-200'
                ]">
                  <td :class="[
                    'py-3 px-2',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">适用范围</td>
                  <td v-for="policy in selectedPolicyDetails" :key="policy.id" :class="[
                    'py-3 px-2',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">
                    {{ policy.applicableScope }}
                  </td>
                </tr>
                <tr>
                  <td :class="[
                    'py-3 px-2',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">主要内容</td>
                  <td v-for="policy in selectedPolicyDetails" :key="policy.id" :class="[
                    'py-3 px-2 text-xs',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">
                    {{ policy.summary }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- 税率对比 -->
        <div v-if="analysisResult && selectedDimensions.includes('tax_rate')" :class="[
          'glass-card p-6',
          isDarkTheme 
            ? 'bg-slate-800/90 backdrop-blur-sm border border-slate-700' 
            : 'bg-white/80 backdrop-blur-sm border border-slate-200'
        ]">
          <h3 :class="[
            'text-xl font-bold mb-4 flex items-center',
            isDarkTheme ? 'text-slate-100' : 'text-slate-800'
          ]">
            <TrendingUp :class="[
              'w-5 h-5 mr-2',
              isDarkTheme ? 'text-green-400' : 'text-green-600'
            ]" />
            税率对比分析
          </h3>
          
          <!-- 税率图表 -->
          <div class="mb-6">
            <div :class="[
              'h-64 rounded-lg p-4 flex items-center justify-center border',
              isDarkTheme ? 'bg-slate-800 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <v-chart v-if="taxRateChartOption" :option="taxRateChartOption" class="w-full h-full" />
              <div v-else :class="isDarkTheme ? 'text-slate-400' : 'text-slate-500'">税率对比图表</div>
            </div>
          </div>

          <!-- 税率详细对比 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div v-for="policy in selectedPolicyDetails" :key="policy.id" :class="[
              'rounded-lg p-4 border',
              isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <h4 :class="[
                'font-medium mb-3',
                isDarkTheme ? 'text-slate-100' : 'text-slate-800'
              ]">{{ policy.title }}</h4>
              <div class="space-y-2">
                <div v-for="rate in policy.taxRates" :key="rate.bracket" class="flex justify-between">
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">{{ rate.bracket }}</span>
                  <span :class="[
                    'font-medium',
                    isDarkTheme ? 'text-cyan-400' : 'text-cyan-600'
                  ]">{{ rate.rate }}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 纳税人范围对比 -->
        <div v-if="analysisResult && selectedDimensions.includes('taxpayer_scope')" :class="[
          'glass-card p-6',
          isDarkTheme 
            ? 'bg-slate-800/90 backdrop-blur-sm border border-slate-700' 
            : 'bg-white/80 backdrop-blur-sm border border-slate-200'
        ]">
          <h3 :class="[
            'text-xl font-bold mb-4 flex items-center',
            isDarkTheme ? 'text-slate-100' : 'text-slate-800'
          ]">
            <Users :class="[
              'w-5 h-5 mr-2',
              isDarkTheme ? 'text-orange-400' : 'text-orange-600'
            ]" />
            纳税人范围对比
          </h3>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div v-for="policy in selectedPolicyDetails" :key="policy.id" :class="[
              'rounded-lg p-4 border',
              isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <h4 :class="[
                'font-medium mb-3',
                isDarkTheme ? 'text-slate-100' : 'text-slate-800'
              ]">{{ policy.title }}</h4>
              
              <!-- 适用人群 -->
              <div class="mb-4">
                <h5 :class="[
                  'text-sm font-medium mb-2',
                  isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                ]">适用人群</h5>
                <div class="flex flex-wrap gap-2">
                  <span v-for="group in policy.taxpayerGroups" :key="group" 
                    :class="[
                      'px-2 py-1 rounded text-xs',
                      isDarkTheme ? 'bg-orange-900/50 text-orange-300 border border-orange-700' : 'bg-orange-100 text-orange-700'
                    ]">
                    {{ group }}
                  </span>
                </div>
              </div>

              <!-- 收入门槛 -->
              <div class="mb-4">
                <h5 :class="[
                  'text-sm font-medium mb-2',
                  isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                ]">收入门槛</h5>
                <div :class="[
                  'font-medium',
                  isDarkTheme ? 'text-cyan-400' : 'text-cyan-600'
                ]">{{ policy.incomeThreshold }}</div>
              </div>

              <!-- 豁免条件 -->
              <div>
                <h5 :class="[
                  'text-sm font-medium mb-2',
                  isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                ]">豁免条件</h5>
                <ul :class="[
                  'text-xs space-y-1',
                  isDarkTheme ? 'text-slate-300' : 'text-slate-800'
                ]">
                  <li v-for="condition in policy.exemptionConditions" :key="condition">
                    • {{ condition }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 税收优惠对比 -->
        <div v-if="analysisResult && selectedDimensions.includes('incentives')" :class="[
          'glass-card p-6',
          isDarkTheme 
            ? 'bg-slate-800/90 backdrop-blur-sm border border-slate-700' 
            : 'bg-white/80 backdrop-blur-sm border border-slate-200'
        ]">
          <h3 :class="[
            'text-xl font-bold mb-4 flex items-center',
            isDarkTheme ? 'text-slate-100' : 'text-slate-800'
          ]">
            <Gift :class="[
              'w-5 h-5 mr-2',
              isDarkTheme ? 'text-yellow-400' : 'text-yellow-600'
            ]" />
            税收优惠对比
          </h3>

          <div class="space-y-4">
            <div v-for="policy in selectedPolicyDetails" :key="policy.id" :class="[
              'rounded-lg p-4 border',
              isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <h4 :class="[
                'font-medium mb-3',
                isDarkTheme ? 'text-slate-100' : 'text-slate-800'
              ]">{{ policy.title }}</h4>
              
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <!-- 减免政策 -->
                <div>
                  <h5 :class="[
                    'text-sm font-medium mb-2',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">减免政策</h5>
                  <div class="space-y-2">
                    <div v-for="deduction in policy.deductions" :key="deduction.type" 
                       :class="[
                         'rounded p-2 border',
                         isDarkTheme ? 'bg-yellow-900/30 border-yellow-700' : 'bg-yellow-50 border-yellow-200'
                       ]">
                      <div :class="[
                        'text-xs font-medium',
                        isDarkTheme ? 'text-yellow-300' : 'text-yellow-700'
                      ]">{{ deduction.type }}</div>
                      <div :class="[
                        'text-xs',
                        isDarkTheme ? 'text-slate-300' : 'text-slate-800'
                      ]">{{ deduction.amount }}</div>
                    </div>
                  </div>
                </div>

                <!-- 优惠条件 -->
                <div>
                  <h5 :class="[
                    'text-sm font-medium mb-2',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">优惠条件</h5>
                  <ul :class="[
                    'text-xs space-y-1',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-800'
                  ]">
                    <li v-for="condition in policy.incentiveConditions" :key="condition">
                      • {{ condition }}
                    </li>
                  </ul>
                </div>

                <!-- 优惠期限 -->
                <div>
                  <h5 :class="[
                    'text-sm font-medium mb-2',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">优惠期限</h5>
                  <div :class="[
                    'font-medium text-sm',
                    isDarkTheme ? 'text-cyan-400' : 'text-cyan-600'
                  ]">{{ policy.incentivePeriod }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 合规要求对比 -->
        <div v-if="analysisResult && selectedDimensions.includes('compliance')" :class="[
          'glass-card p-6',
          isDarkTheme 
            ? 'bg-slate-800/90 backdrop-blur-sm border border-slate-700' 
            : 'bg-white/80 backdrop-blur-sm border border-slate-200'
        ]">
          <h3 :class="[
            'text-xl font-bold mb-4 flex items-center',
            isDarkTheme ? 'text-slate-100' : 'text-slate-800'
          ]">
            <FileText :class="[
              'w-5 h-5 mr-2',
              isDarkTheme ? 'text-blue-400' : 'text-blue-600'
            ]" />
            合规要求对比
          </h3>

          <div class="space-y-4">
            <div v-for="policy in selectedPolicyDetails" :key="policy.id" :class="[
              'rounded-lg p-4 border',
              isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <h4 :class="[
                'font-medium mb-3',
                isDarkTheme ? 'text-slate-100' : 'text-slate-800'
              ]">{{ policy.title }}</h4>
              
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- 申报要求 -->
                <div>
                  <h5 :class="[
                    'text-sm font-medium mb-2',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">申报要求</h5>
                  <div class="space-y-2">
                    <div :class="[
                      'rounded p-2 border',
                      isDarkTheme ? 'bg-blue-900/30 border-blue-700' : 'bg-blue-50 border-blue-200'
                    ]">
                      <div :class="[
                        'text-xs font-medium',
                        isDarkTheme ? 'text-blue-300' : 'text-blue-700'
                      ]">申报期限</div>
                      <div :class="[
                        'text-xs',
                        isDarkTheme ? 'text-slate-300' : 'text-slate-800'
                      ]">{{ getComplianceInfo(policy.type).deadline }}</div>
                    </div>
                    <div :class="[
                      'rounded p-2 border',
                      isDarkTheme ? 'bg-blue-900/30 border-blue-700' : 'bg-blue-50 border-blue-200'
                    ]">
                      <div :class="[
                        'text-xs font-medium',
                        isDarkTheme ? 'text-blue-300' : 'text-blue-700'
                      ]">申报方式</div>
                      <div :class="[
                        'text-xs',
                        isDarkTheme ? 'text-slate-300' : 'text-slate-800'
                      ]">{{ getComplianceInfo(policy.type).method }}</div>
                    </div>
                  </div>
                </div>

                <!-- 缴纳要求 -->
                <div>
                  <h5 :class="[
                    'text-sm font-medium mb-2',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">缴纳要求</h5>
                  <div class="space-y-2">
                    <div :class="[
                      'rounded p-2 border',
                      isDarkTheme ? 'bg-cyan-900/30 border-cyan-700' : 'bg-cyan-50 border-cyan-200'
                    ]">
                      <div :class="[
                        'text-xs font-medium',
                        isDarkTheme ? 'text-cyan-300' : 'text-cyan-700'
                      ]">缴纳期限</div>
                      <div :class="[
                        'text-xs',
                        isDarkTheme ? 'text-slate-300' : 'text-slate-800'
                      ]">{{ getComplianceInfo(policy.type).paymentDeadline }}</div>
                    </div>
                    <div :class="[
                      'rounded p-2 border',
                      isDarkTheme ? 'bg-cyan-900/30 border-cyan-700' : 'bg-cyan-50 border-cyan-200'
                    ]">
                      <div :class="[
                        'text-xs font-medium',
                        isDarkTheme ? 'text-cyan-300' : 'text-cyan-700'
                      ]">缴纳方式</div>
                      <div :class="[
                        'text-xs',
                        isDarkTheme ? 'text-slate-300' : 'text-slate-800'
                      ]">{{ getComplianceInfo(policy.type).paymentMethod }}</div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 所需材料 -->
              <div class="mt-4">
                <h5 :class="[
                  'text-sm font-medium mb-2',
                  isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                ]">所需材料</h5>
                <ul :class="[
                  'text-xs space-y-1',
                  isDarkTheme ? 'text-slate-300' : 'text-slate-800'
                ]">
                  <li v-for="document in getComplianceInfo(policy.type).documents" :key="document">
                    • {{ document }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 执行机制对比 -->
        <div v-if="analysisResult && selectedDimensions.includes('enforcement')" :class="[
          'glass-card p-6',
          isDarkTheme 
            ? 'bg-slate-800/90 backdrop-blur-sm border border-slate-700' 
            : 'bg-white/80 backdrop-blur-sm border border-slate-200'
        ]">
          <h3 :class="[
            'text-xl font-bold mb-4 flex items-center',
            isDarkTheme ? 'text-slate-100' : 'text-slate-800'
          ]">
            <Target :class="[
              'w-5 h-5 mr-2',
              isDarkTheme ? 'text-red-400' : 'text-red-600'
            ]" />
            执行机制对比
          </h3>

          <div class="space-y-4">
            <div v-for="policy in selectedPolicyDetails" :key="policy.id" :class="[
              'rounded-lg p-4 border',
              isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <h4 :class="[
                'font-medium mb-3',
                isDarkTheme ? 'text-slate-100' : 'text-slate-800'
              ]">{{ policy.title }}</h4>
              
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <!-- 监管措施 -->
                <div>
                  <h5 :class="[
                    'text-sm font-medium mb-2',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">监管措施</h5>
                  <div class="space-y-2">
                    <div v-for="measure in getEnforcementInfo(policy.type).supervision" :key="measure" 
                         :class="[
                           'rounded p-2 border',
                           isDarkTheme ? 'bg-red-900/30 border-red-700' : 'bg-red-50 border-red-200'
                         ]">
                      <div :class="[
                        'text-xs',
                        isDarkTheme ? 'text-red-300' : 'text-red-700'
                      ]">{{ measure }}</div>
                    </div>
                  </div>
                </div>

                <!-- 处罚措施 -->
                <div>
                  <h5 :class="[
                    'text-sm font-medium mb-2',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">处罚措施</h5>
                  <div class="space-y-2">
                    <div v-for="penalty in getEnforcementInfo(policy.type).penalties" :key="penalty.type" 
                         :class="[
                           'rounded p-2 border',
                           isDarkTheme ? 'bg-orange-900/30 border-orange-700' : 'bg-orange-50 border-orange-200'
                         ]">
                      <div :class="[
                        'text-xs font-medium',
                        isDarkTheme ? 'text-orange-300' : 'text-orange-700'
                      ]">{{ penalty.type }}</div>
                      <div :class="[
                        'text-xs',
                        isDarkTheme ? 'text-slate-300' : 'text-slate-800'
                      ]">{{ penalty.description }}</div>
                    </div>
                  </div>
                </div>

                <!-- 救济途径 -->
                <div>
                  <h5 :class="[
                    'text-sm font-medium mb-2',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">救济途径</h5>
                  <ul :class="[
                    'text-xs space-y-1',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-800'
                  ]">
                    <li v-for="remedy in getEnforcementInfo(policy.type).remedies" :key="remedy">
                      • {{ remedy }}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 趋势预测 -->
        <div v-if="analysisResult && selectedDimensions.includes('trend_analysis')" :class="[
          'glass-card p-6',
          isDarkTheme 
            ? 'bg-slate-800/90 backdrop-blur-sm border border-slate-700' 
            : 'bg-white/80 backdrop-blur-sm border border-slate-200'
        ]">
          <h3 :class="[
            'text-xl font-bold mb-4 flex items-center',
            isDarkTheme ? 'text-slate-100' : 'text-slate-800'
          ]">
            <TrendingUp :class="[
              'w-5 h-5 mr-2',
              isDarkTheme ? 'text-purple-400' : 'text-purple-600'
            ]" />
            趋势预测分析
          </h3>
          
          <!-- 趋势图表 -->
          <div class="mb-6">
            <div :class="[
              'h-64 rounded-lg p-4 flex items-center justify-center border',
              isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <v-chart v-if="trendChartOption" :option="trendChartOption" class="w-full h-full" />
              <div v-else :class="isDarkTheme ? 'text-slate-400' : 'text-slate-500'">趋势预测图表</div>
            </div>
          </div>

          <!-- 预测洞察 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div :class="[
              'rounded-lg p-4 border',
              isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <h4 :class="[
                'font-medium mb-3 flex items-center',
                isDarkTheme ? 'text-slate-100' : 'text-slate-800'
              ]">
                <Brain :class="[
                  'w-4 h-4 mr-2',
                  isDarkTheme ? 'text-purple-400' : 'text-purple-600'
                ]" />
                AI预测洞察
              </h4>
              <ul :class="[
                'text-sm space-y-2',
                isDarkTheme ? 'text-slate-300' : 'text-slate-800'
              ]">
                <li v-for="insight in trendInsights" :key="insight" class="flex items-start">
                  <span :class="[
                    'mr-2',
                    isDarkTheme ? 'text-purple-400' : 'text-purple-600'
                  ]">•</span>
                  {{ insight }}
                </li>
              </ul>
            </div>

            <div :class="[
              'rounded-lg p-4 border',
              isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <h4 :class="[
                'font-medium mb-3 flex items-center',
                isDarkTheme ? 'text-slate-100' : 'text-slate-800'
              ]">
                <AlertTriangle :class="[
                  'w-4 h-4 mr-2',
                  isDarkTheme ? 'text-yellow-400' : 'text-yellow-600'
                ]" />
                风险提醒
              </h4>
              <ul :class="[
                'text-sm space-y-2',
                isDarkTheme ? 'text-slate-300' : 'text-slate-800'
              ]">
                <li v-for="risk in riskAlerts" :key="risk" class="flex items-start">
                  <span :class="[
                    'mr-2',
                    isDarkTheme ? 'text-yellow-400' : 'text-yellow-600'
                  ]">⚠</span>
                  {{ risk }}
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 影响分析 -->
        <div v-if="analysisResult && selectedDimensions.includes('impact_analysis')" :class="[
          'glass-card p-6',
          isDarkTheme 
            ? 'bg-slate-800/90 backdrop-blur-sm border border-slate-700' 
            : 'bg-white/80 backdrop-blur-sm border border-slate-200'
        ]">
          <h3 :class="[
            'text-xl font-bold mb-4 flex items-center',
            isDarkTheme ? 'text-slate-100' : 'text-slate-800'
          ]">
            <Target :class="[
              'w-5 h-5 mr-2',
              isDarkTheme ? 'text-red-400' : 'text-red-600'
            ]" />
            影响分析评估
          </h3>

          <!-- 影响维度雷达图 -->
          <div class="mb-6">
            <div :class="[
              'h-64 rounded-lg p-4 flex items-center justify-center border',
              isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <v-chart v-if="impactRadarOption" :option="impactRadarOption" class="w-full h-full" />
              <div v-else :class="isDarkTheme ? 'text-slate-400' : 'text-slate-500'">影响分析雷达图</div>
            </div>
          </div>

          <!-- 影响评估详情 -->
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div :class="[
              'rounded-lg p-4 border',
              isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <h4 :class="[
                'font-medium mb-3',
                isDarkTheme ? 'text-red-400' : 'text-red-600'
              ]">经济影响</h4>
              <div class="space-y-2">
                <div class="flex justify-between">
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">GDP影响</span>
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">{{ economicImpact.gdp }}</span>
                </div>
                <div class="flex justify-between">
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">就业影响</span>
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">{{ economicImpact.employment }}</span>
                </div>
                <div class="flex justify-between">
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">投资影响</span>
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">{{ economicImpact.investment }}</span>
                </div>
              </div>
            </div>

            <div :class="[
              'rounded-lg p-4 border',
              isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <h4 :class="[
                'font-medium mb-3',
                isDarkTheme ? 'text-blue-400' : 'text-blue-600'
              ]">社会影响</h4>
              <div class="space-y-2">
                <div class="flex justify-between">
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">收入分配</span>
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">{{ socialImpact.income }}</span>
                </div>
                <div class="flex justify-between">
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">社会公平</span>
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">{{ socialImpact.equity }}</span>
                </div>
                <div class="flex justify-between">
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">消费行为</span>
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">{{ socialImpact.consumption }}</span>
                </div>
              </div>
            </div>

            <div :class="[
              'rounded-lg p-4 border',
              isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
            ]">
              <h4 :class="[
                'font-medium mb-3',
                isDarkTheme ? 'text-green-400' : 'text-green-600'
              ]">财政影响</h4>
              <div class="space-y-2">
                <div class="flex justify-between">
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">税收收入</span>
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">{{ fiscalImpact.revenue }}</span>
                </div>
                <div class="flex justify-between">
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">征管成本</span>
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">{{ fiscalImpact.cost }}</span>
                </div>
                <div class="flex justify-between">
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-300' : 'text-slate-600'
                  ]">合规性</span>
                  <span :class="[
                    'text-sm',
                    isDarkTheme ? 'text-slate-200' : 'text-slate-800'
                  ]">{{ fiscalImpact.compliance }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 综合报告 -->
        <div v-if="analysisResult" :class="[
          'glass-card p-6',
          isDarkTheme 
            ? 'bg-slate-800/90 backdrop-blur-sm border border-slate-700' 
            : 'bg-white/80 backdrop-blur-sm border border-slate-200'
        ]">
          <h3 :class="[
            'text-xl font-bold mb-4 flex items-center',
            isDarkTheme ? 'text-slate-100' : 'text-slate-800'
          ]">
            <FileText :class="[
              'w-5 h-5 mr-2',
              isDarkTheme ? 'text-cyan-400' : 'text-cyan-600'
            ]" />
            智能分析报告
          </h3>
          
          <div :class="[
            'rounded-lg p-4 mb-4 border',
            isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
          ]">
            <h4 :class="[
              'font-medium mb-3',
              isDarkTheme ? 'text-cyan-400' : 'text-cyan-600'
            ]">分析摘要</h4>
            <p :class="[
              'text-sm leading-relaxed',
              isDarkTheme ? 'text-slate-300' : 'text-slate-800'
            ]">{{ analysisResult.summary }}</p>
          </div>

          <div :class="[
            'rounded-lg p-4 mb-4 border',
            isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
          ]">
            <h4 :class="[
              'font-medium mb-3',
              isDarkTheme ? 'text-purple-400' : 'text-purple-600'
            ]">关键发现</h4>
            <ul :class="[
              'text-sm space-y-2',
              isDarkTheme ? 'text-slate-300' : 'text-slate-800'
            ]">
              <li v-for="finding in analysisResult.keyFindings" :key="finding" class="flex items-start">
                <span :class="[
                  'mr-2',
                  isDarkTheme ? 'text-purple-400' : 'text-purple-600'
                ]">📊</span>
                {{ finding }}
              </li>
            </ul>
          </div>

          <div :class="[
            'rounded-lg p-4 border',
            isDarkTheme ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-50 border-slate-200'
          ]">
            <h4 :class="[
              'font-medium mb-3',
              isDarkTheme ? 'text-green-400' : 'text-green-600'
            ]">政策建议</h4>
            <ul :class="[
              'text-sm space-y-2',
              isDarkTheme ? 'text-slate-300' : 'text-slate-800'
            ]">
              <li v-for="recommendation in analysisResult.recommendations" :key="recommendation" class="flex items-start">
                <span :class="[
                  'mr-2',
                  isDarkTheme ? 'text-green-400' : 'text-green-600'
                ]">💡</span>
                {{ recommendation }}
              </li>
            </ul>
          </div>

          <!-- 导出按钮 -->
          <div class="flex space-x-4 mt-6">
            <button @click="exportReport('pdf')" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-400 transition-colors shadow-md hover:shadow-lg">
              <FileText class="w-4 h-4 inline mr-2" />
              导出PDF
            </button>
            <button @click="exportReport('excel')" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-400 transition-colors shadow-md hover:shadow-lg">
              <BarChart3 class="w-4 h-4 inline mr-2" />
              导出Excel
            </button>
            <button @click="shareReport" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-400 transition-colors shadow-md hover:shadow-lg">
              <Share2 class="w-4 h-4 inline mr-2" />
              分享报告
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { 
  Calculator, FileText, BarChart3, TrendingUp, Users, Gift, 
  Target, Settings, Zap, Brain, AlertTriangle, Share2
} from 'lucide-vue-next'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, RadarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  RadarComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import themeService, { themeState } from '../services/themeService.js'

// 注册必要的组件
use([
  CanvasRenderer,
  LineChart,
  BarChart,
  RadarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  RadarComponent
])

export default {
  name: 'TaxPolicyAnalysisAgent',
  components: {
    Calculator, FileText, BarChart3, TrendingUp, Users, Gift,
    Target, Settings, Zap, Brain, AlertTriangle, Share2,
    VChart
  },
  setup() {
    // 响应式数据
    const activeMode = ref('basic')
    const searchQuery = ref('')
    const selectedPolicyType = ref('')
    const selectedPolicies = ref([])
    const selectedDimensions = ref(['basic_info', 'tax_rate', 'taxpayer_scope', 'incentives'])
    const isAnalyzing = ref(false)
    const analysisResult = ref(null)
    const isDarkTheme = computed(() => themeState.isDark)

    const toggleTheme = () => {
      themeService.toggleTheme()
    }

    // 分析模式配置
    const analysisModes = ref([
      { id: 'basic', title: '基础对比', icon: 'FileText' },
      { id: 'tax_rate', title: '税率分析', icon: 'TrendingUp' },
      { id: 'taxpayer', title: '纳税人范围', icon: 'Users' },
      { id: 'incentive', title: '税收优惠', icon: 'Gift' },
      { id: 'trend', title: '趋势预测', icon: 'BarChart3' },
      { id: 'impact', title: '影响分析', icon: 'Target' }
    ])

    // 分析维度配置
    const analysisDimensions = ref([
      { id: 'basic_info', name: '基础信息', description: '政策基本信息对比' },
      { id: 'tax_rate', name: '税率结构', description: '税率档次和计算方式' },
      { id: 'taxpayer_scope', name: '纳税人范围', description: '适用人群和条件' },
      { id: 'incentives', name: '优惠政策', description: '减免和优惠措施' },
      { id: 'compliance', name: '合规要求', description: '申报和缴纳要求' },
      { id: 'enforcement', name: '执行机制', description: '监管和处罚措施' },
      { id: 'trend_analysis', name: '趋势预测', description: '政策发展趋势分析' },
      { id: 'impact_analysis', name: '影响评估', description: '经济社会影响分析' }
    ])

    // 模拟税收政策数据
    const taxPolicies = ref([
      {
        id: 'policy_001',
        title: '个人所得税综合改革政策',
        type: 'income_tax',
        effectiveDate: '2019-01-01',
        applicableScope: '全国范围内个人纳税人',
        summary: '建立综合与分类相结合的个人所得税制，增加专项附加扣除',
        taxRates: [
          { bracket: '0-36,000元', rate: 3 },
          { bracket: '36,000-144,000元', rate: 10 },
          { bracket: '144,000-300,000元', rate: 20 },
          { bracket: '300,000-420,000元', rate: 25 },
          { bracket: '420,000-660,000元', rate: 30 },
          { bracket: '660,000-960,000元', rate: 35 },
          { bracket: '960,000元以上', rate: 45 }
        ],
        taxpayerGroups: ['工薪收入者', '个体工商户', '自由职业者'],
        incomeThreshold: '年收入超过12万元',
        exemptionConditions: ['年收入不超过12万元', '年度汇算清缴退税不超过400元'],
        deductions: [
          { type: '子女教育', amount: '每月1000元' },
          { type: '继续教育', amount: '每月300-400元' },
          { type: '住房贷款利息', amount: '每月1000元' },
          { type: '住房租金', amount: '每月800-1500元' },
          { type: '赡养老人', amount: '每月2000元' }
        ],
        incentiveConditions: ['符合专项附加扣除条件', '按时申报纳税'],
        incentivePeriod: '长期有效'
      },
      {
        id: 'policy_002',
        title: '小微企业所得税优惠政策',
        type: 'corporate_tax',
        effectiveDate: '2021-01-01',
        applicableScope: '符合条件的小型微利企业',
        summary: '对小型微利企业年应纳税所得额不超过100万元的部分，减按12.5%计入应纳税所得额',
        taxRates: [
          { bracket: '0-100万元', rate: 2.5 },
          { bracket: '100-300万元', rate: 10 },
          { bracket: '300万元以上', rate: 25 }
        ],
        taxpayerGroups: ['小型微利企业', '初创企业'],
        incomeThreshold: '年应纳税所得额不超过300万元',
        exemptionConditions: ['从业人数不超过300人', '资产总额不超过5000万元'],
        deductions: [
          { type: '研发费用加计扣除', amount: '100%加计扣除' },
          { type: '固定资产一次性扣除', amount: '不超过500万元设备器具' }
        ],
        incentiveConditions: ['符合小型微利企业条件', '正常申报纳税'],
        incentivePeriod: '2021-2022年'
      },
      {
        id: 'policy_003',
        title: '增值税小规模纳税人减免政策',
        type: 'vat',
        effectiveDate: '2021-04-01',
        applicableScope: '小规模纳税人',
        summary: '小规模纳税人发生增值税应税销售行为，合计月销售额未超过15万元的，免征增值税',
        taxRates: [
          { bracket: '月销售额15万元以下', rate: 0 },
          { bracket: '月销售额15万元以上', rate: 3 }
        ],
        taxpayerGroups: ['小规模纳税人', '个体工商户'],
        incomeThreshold: '月销售额15万元',
        exemptionConditions: ['月销售额不超过15万元', '季度销售额不超过45万元'],
        deductions: [
          { type: '进项税额抵扣', amount: '按规定抵扣' }
        ],
        incentiveConditions: ['符合小规模纳税人条件'],
        incentivePeriod: '2021年4月1日起'
      }
    ])

    // 计算属性
    const filteredPolicies = computed(() => {
      return taxPolicies.value.filter(policy => {
        const matchesSearch = !searchQuery.value || 
          policy.title.toLowerCase().includes(searchQuery.value.toLowerCase())
        const matchesType = !selectedPolicyType.value || 
          policy.type === selectedPolicyType.value
        return matchesSearch && matchesType
      })
    })

    const selectedPolicyDetails = computed(() => {
      return taxPolicies.value.filter(policy => 
        selectedPolicies.value.includes(policy.id)
      )
    })

    // 图表配置
    const taxRateChartOption = computed(() => {
      if (selectedPolicyDetails.value.length === 0) return null
      
      const categories = []
      const series = []
      
      selectedPolicyDetails.value.forEach(policy => {
        const policyData = policy.taxRates.map(rate => rate.rate)
        series.push({
          name: policy.title,
          type: 'line',
          data: policyData,
          smooth: true
        })
        if (categories.length === 0) {
          categories.push(...policy.taxRates.map(rate => rate.bracket))
        }
      })

      return {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          textStyle: { color: '#1e293b' },
          borderColor: '#e2e8f0',
          borderWidth: 1
        },
        legend: {
          data: series.map(s => s.name),
          textStyle: { color: '#475569' }
        },
        xAxis: {
          type: 'category',
          data: categories,
          axisLabel: { 
            color: '#64748b',
            rotate: 45,
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#64748b' },
          name: '税率(%)',
          nameTextStyle: { color: '#64748b' }
        },
        series: series
      }
    })

    const trendChartOption = computed(() => {
      return {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          textStyle: { color: '#1e293b' },
          borderColor: '#e2e8f0',
          borderWidth: 1
        },
        legend: {
          data: ['税收收入预测', '政策影响度'],
          textStyle: { color: '#475569' }
        },
        xAxis: {
          type: 'category',
          data: ['2021', '2022', '2023', '2024', '2025'],
          axisLabel: { color: '#64748b' }
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#64748b' }
        },
        series: [
          {
            name: '税收收入预测',
            type: 'line',
            data: [100, 105, 110, 115, 120],
            smooth: true,
            itemStyle: { color: '#06b6d4' }
          },
          {
            name: '政策影响度',
            type: 'bar',
            data: [85, 90, 88, 92, 95],
            itemStyle: { color: '#8b5cf6' }
          }
        ]
      }
    })

    const impactRadarOption = computed(() => {
      return {
        backgroundColor: 'transparent',
        tooltip: {},
        radar: {
          indicator: [
            { name: '经济影响', max: 100 },
            { name: '社会影响', max: 100 },
            { name: '财政影响', max: 100 },
            { name: '合规性', max: 100 },
            { name: '公平性', max: 100 },
            { name: '效率性', max: 100 }
          ],
          axisName: { color: '#64748b' }
        },
        series: [{
          name: '影响分析',
          type: 'radar',
          data: [
            {
              value: [80, 75, 85, 90, 85, 80],
              name: '综合影响评估'
            }
          ]
        }]
      }
    })

    // 模拟数据
    const trendInsights = ref([
      '个人所得税改革将持续减轻中低收入群体税负',
      '小微企业税收优惠政策有助于促进就业和创新',
      '增值税减免政策将提高小规模纳税人活跃度',
      '预计未来税收政策将更加注重结构性调整'
    ])

    const riskAlerts = ref([
      '政策执行过程中可能存在理解偏差',
      '部分纳税人可能存在合规风险',
      '税收征管系统需要持续优化',
      '政策调整可能影响财政收入稳定性'
    ])

    const economicImpact = ref({
      gdp: '+0.3%',
      employment: '+2.1%',
      investment: '+1.8%'
    })

    const socialImpact = ref({
      income: '改善',
      equity: '提升',
      consumption: '+1.5%'
    })

    const fiscalImpact = ref({
      revenue: '-5.2%',
      cost: '+0.8%',
      compliance: '85%'
    })

    // 方法
    const togglePolicySelection = (policy) => {
      const index = selectedPolicies.value.indexOf(policy.id)
      if (index > -1) {
        selectedPolicies.value.splice(index, 1)
      } else {
        if (selectedPolicies.value.length < 5) {
          selectedPolicies.value.push(policy.id)
        }
      }
    }

    const getPolicyTypeText = (type) => {
      const typeMap = {
        'income_tax': '个人所得税',
        'corporate_tax': '企业所得税',
        'vat': '增值税',
        'consumption_tax': '消费税',
        'property_tax': '财产税'
      }
      return typeMap[type] || type
    }

    const startAnalysis = async () => {
      if (selectedPolicies.value.length < 2 || selectedDimensions.value.length === 0) {
        return
      }

      isAnalyzing.value = true
      
      // 模拟分析过程
      await new Promise(resolve => setTimeout(resolve, 3000))
      
      analysisResult.value = {
        summary: `基于AI智能分析，对比了${selectedPolicies.value.length}项税收政策在${selectedDimensions.value.length}个维度上的差异。分析显示，不同政策在税率结构、适用范围和优惠措施方面存在显著差异，体现了税收政策的针对性和精准性。`,
        keyFindings: [
          '个人所得税改革显著降低了中低收入群体税负',
          '小微企业优惠政策有效促进了创业创新',
          '增值税减免政策提升了市场主体活力',
          '专项附加扣除政策体现了税收公平原则'
        ],
        recommendations: [
          '建议继续完善个人所得税专项附加扣除政策',
          '适当扩大小微企业税收优惠范围',
          '加强税收政策宣传和纳税服务',
          '建立动态调整机制，及时优化政策参数'
        ]
      }
      
      isAnalyzing.value = false
    }

    const exportReport = (format) => {
      // 实现导出功能
      console.log(`导出${format}格式报告`)
      alert(`正在导出${format}格式报告...`)
    }

    const shareReport = () => {
      // 实现分享功能
      console.log('分享报告')
      alert('正在生成分享链接...')
    }

    const getComplianceInfo = (policyType) => {
      const complianceMap = {
        'income_tax': {
          deadline: '次年3月1日至6月30日',
          method: '网上申报或税务局现场申报',
          paymentDeadline: '申报期内缴纳',
          paymentMethod: '银行转账或电子缴税',
          documents: ['身份证件', '收入证明', '专项附加扣除资料', '其他相关材料']
        },
        'corporate_tax': {
          deadline: '次年5月31日前',
          method: '网上申报',
          paymentDeadline: '申报期内缴纳',
          paymentMethod: '银行转账',
          documents: ['营业执照', '财务报表', '税务登记证', '相关合同协议']
        },
        'vat': {
          deadline: '次月15日前',
          method: '网上申报',
          paymentDeadline: '申报期内缴纳',
          paymentMethod: '银行转账或POS机缴费',
          documents: ['增值税专用发票', '进项税额抵扣凭证', '销售明细']
        }
      }
      return complianceMap[policyType] || {
        deadline: '按规定期限',
        method: '网上申报',
        paymentDeadline: '申报期内',
        paymentMethod: '银行转账',
        documents: ['相关证明材料']
      }
    }

    const getEnforcementInfo = (policyType) => {
      const enforcementMap = {
        'income_tax': {
          supervision: ['定期稽查', '重点监控', '数据比对'],
          penalties: [
            { type: '未按期申报', description: '处应纳税额50%以上5倍以下罚款' },
            { type: '偷税漏税', description: '处不缴或少缴税款50%以上5倍以下罚款' }
          ],
          remedies: ['行政复议', '行政诉讼', '税务听证']
        },
        'corporate_tax': {
          supervision: ['年度检查', '专项检查', '风险评估'],
          penalties: [
            { type: '未按期申报', description: '处2000元以下罚款' },
            { type: '虚假申报', description: '处应纳税额50%以上3倍以下罚款' }
          ],
          remedies: ['行政复议', '行政诉讼', '申请听证']
        },
        'vat': {
          supervision: ['发票管理', '进销项核对', '实地核查'],
          penalties: [
            { type: '虚开发票', description: '处违法所得1倍以上5倍以下罚款' },
            { type: '偷逃税款', description: '处应缴税额50%以上5倍以下罚款' }
          ],
          remedies: ['行政复议', '行政诉讼', '协商和解']
        }
      }
      return enforcementMap[policyType] || {
        supervision: ['常规检查'],
        penalties: [{ type: '违法行为', description: '依法处罚' }],
        remedies: ['法定救济途径']
      }
    }

    return {
      activeMode,
      searchQuery,
      selectedPolicyType,
      selectedPolicies,
      selectedDimensions,
      isAnalyzing,
      analysisResult,
      analysisModes,
      analysisDimensions,
      filteredPolicies,
      selectedPolicyDetails,
      taxRateChartOption,
      trendChartOption,
      impactRadarOption,
      trendInsights,
      riskAlerts,
      economicImpact,
      socialImpact,
      fiscalImpact,
      togglePolicySelection,
      getPolicyTypeText,
      startAnalysis,
      exportReport,
      shareReport,
      getComplianceInfo,
      getEnforcementInfo,
      isDarkTheme,
      toggleTheme,
    }
  }
}
</script>

<style scoped>
body {
  background-color: var(--color-primary); /* 根据主题动态设置背景颜色 */
  color: var(--color-textPrimary); /* 根据主题动态设置文本颜色 */
}

/* 深色主题下的分析结果区样式 */
[data-theme='dark'] .glass-card {
  background: var(--color-glassBg); /* 深色背景 */
  color: var(--color-textPrimary); /* 深色主题下的文本颜色 */
  border: 1px solid var(--color-border); /* 深色主题下的边框颜色 */
}

[data-theme='dark'] .glass-card h3 {
  color: var(--color-textPrimary); /* 标题颜色 */
}

[data-theme='dark'] .glass-card p,
[data-theme='dark'] .glass-card span,
[data-theme='dark'] .glass-card ul li {
  color: var(--color-textSecondary); /* 副文本颜色 */
}

[data-theme='dark'] .glass-card table th,
[data-theme='dark'] .glass-card table td {
  color: var(--color-textPrimary); /* 表格内容颜色 */
}

/* 政策选择框样式 */
.policy-card {
  background-color: var(--color-secondary); /* 根据主题动态设置背景颜色 */
  color: var(--color-textPrimary); /* 根据主题动态设置文本颜色 */
  border: 1px solid var(--color-border); /* 根据主题动态设置边框颜色 */
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.policy-card:hover {
  border-color: var(--color-borderHover); /* 鼠标悬停时的边框颜色 */
}


.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
  }
  to {
    text-shadow: 0 0 30px rgba(6, 182, 212, 0.5), 0 0 40px rgba(139, 92, 246, 0.2);
  }
}

/* 自定义滚动条 */
.overflow-y-auto::-webkit-scrollbar {
  width: 4px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: rgba(203, 213, 225, 0.3);
  border-radius: 2px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.5);
  border-radius: 2px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.7);
}

/* 确保sticky定位正常工作 */
.sticky {
  position: -webkit-sticky;
  position: sticky;
}

/* 优化移动端显示 */
@media (max-width: 1279px) {
  .sticky {
    position: static;
  }
}
</style>
